// 课程测评
<template>
  <div>

    <Head />
    <div class="zqalert" style="display: none">
      <div class="asa">
        <p>正确</p>
      </div>

      <p class="ok">确定</p>
    </div>
    <!-- <el-button type="text" >点击打开 Message Box</el-button> -->
    <div class="search">
      <p>课程测试</p>
      <img src="../assets/guanbi(1).png" @click="back()" />
    </div>
    <div class="title">
      <p>{{ lists.name }}</p>
    </div>
    <div v-for="(item, index) in list" :key="index" class="pages">
      <p>
        共<span class="blue">{{ arrs }}</span>题
      </p>
      <p>
        第<span class="blue">{{ indexa + 1 }}</span>题
      </p>
      <p>
        正确:<span class="blue">{{ zqs }}</span>题
      </p>
      <p>
        错题:<span class="red">{{ cw }}</span>题
      </p>
    </div>
    <p class="subject">{{ lists.title }}</p>
    <!-- <p class="subject">{{ lists.title }}</p> -->
    <div class="answer">
      <p @click="nexts(lists.A)">
        A . {{ lists.A }}
        <!-- <span><img src="../assets/zq.png" alt="" /></span> -->
      </p>
      <p @click="nexts(lists.B)">
        B . {{ lists.B }}
        <!-- <span><img src="../assets/zq.png" alt="" /></span> -->
      </p>
      <p @click="nexts(lists.C)">
        C . {{ lists.C }}
        <!-- <span><img src="../assets/zq.png" alt="" /></span> -->
      </p>
      <p @click="nexts(lists.D)">
        D . {{ lists.D }}
        <!-- <span><img src="../assets/zq.png" alt="" /></span> -->
      </p>
    </div>
    <Footer />
  </div>
</template>

<script>
  import Head from "@/components/Head.vue";
  import Footer from "@/components/Footer.vue";
  import axios from "axios";
  import {
    wordTest
  } from '@/api'

  export default {
    components: {
      Head,
      Footer,
    },
    data() {
      return {
        tabs: ["标题一", "标题二", "标题三"],
        // tabContents: ["内容一", "内容二","内容三"],
        num: 0,
        title: "在线英语学习系统 · 人教版 · 初中英语1年级二单元 短语拼写",
        list: [{
          common: "50",
          third: "3",
          correct: "1",
          error: "2"
        }],
        subject: "-Can you finish reading these newspapers before 10 o'clock?",
        subject1: "-Yes,I can.",
        arrs: "",
        lists: {},
        con: [],
        indexa: 0,
        zqs: 0,
        cw: 0,

        // 定义
        dy: "",
      };
    },
    methods: {
      open(s) {
        this.$alert(s, " ", {
          confirmButtonText: "确定",
          callback: (action) => {
            // this.$message({
            //   type: "info",
            //   message: `action: ${action}`,
            // });
            // console.log(11)
            let indexas = this.indexa + 1;
            this.lists = this.con.data[indexas];
            this.indexa = indexas;
            console.log(this.con.data.length)
          },
        });
      },
      back() {
        this.$router.push("index");
      },
      nexts(a) {
        // console.log(zqs);
        let s = this.lists.answer;
        console.log(s);
        console.log(a);
        if (this.lists.answer == a) {
          // alert("正确");
          let s = "正确";
          this.open(s);
          // this.zqs = zqs++;
          let zqss = this.zqs + 1;
          this.zqs = zqss;
        } else {
          // alert(`错误 正确答案为${s}`);
          let s = this.lists.answer;
          console.log(s);
          s = `错误 正确答案为${s}`;
          this.open(s);
          let cws = this.cw + 1;
          this.cw = cws;
        }
        if (this.indexa > this.con.data.length) {
          alert('aaa')
        }

        // let arrss = this.arrs + 1;

        // let indexas = this.indexa + 1;
        // this.lists = this.con.data[indexas];
        // this.indexa = indexas;

        // this.arrs = arrss;
      },
    },
    created() {
      let as = this.$route.query.id;

      wordTest(as).then((res) => {
        this.con = res.data.neirong;
        this.lists = res.data.neirong.data[this.indexa];
        console.log(this.lists);
        this.arrs = res.data.neirong.data.length;
        console.log(res.data.neirong.data);
        console.log(this.arrs);
      })

      // axios.get("/api/WordExam/index", {
      //   params: {
      //     id: as
      //   }
      // }).then((res) => {
      //   // console.log(res.data.data.neirong.data[0]);
      //   this.con = res.data.data.neirong;
      //   this.lists = res.data.data.neirong.data[this.indexa];
      //   console.log(this.lists);
      //   this.arrs = res.data.data.neirong.data.length;
      //   console.log(res.data.data.neirong.data);
      //   console.log(this.arrs);
      // });
    },
  };

</script>
<style lang="scss" scoped>
  .zqalert {
    padding-bottom: 10px;
    width: 30%;
    border: 1px solid red;
    text-align: center;
    margin: 0 auto;
    border-radius: 20px;
    position: fixed;
    top: 20%;
    left: 35%;
    background: #fff;
    color: #333;

    .asa {
      height: 200px;
      line-height: 200px;
      font-size: 30px;
    }

    .ok {
      padding: 10px 0;
      background: #3571ff;
      width: 20%;
      margin: 0 auto;
      border-radius: 10px;
      color: #fff;
    }
  }

  .search {
    width: 98%;
    padding: 0 1%;
    height: 40px;
    line-height: 40px;
    background-color: #3571ff;
    color: #fff;
    display: flex;
    justify-content: space-between;

    img {
      width: 1%;
      height: 22px;
      margin-top: 8px;
    }
  }

  .title {
    p {
      text-align: center;
      margin: 1rem 0;
      font-size: 28px;
    }
  }

  .pages {
    display: flex;
    justify-content: space-around;
    width: 50%;
    margin: 0 auto;
    margin-bottom: 4rem;

    p {
      margin: 2rem 2rem;
      font-size: 19px;

      .blue {
        color: #6b95ff;
      }

      .red {
        color: #ff2424;
      }
    }
  }

  .subject {
    // text-align: center;
    margin-left: 14%;
    font-size: 50px;
    color: #ff2424;
    // margin: 40px 0;
  }

  .answer {
    width: 30%;
    margin: 100px auto;
    position: relative;

    p {
      span {
        position: absolute;
        right: -140px;
        width: 20%;

        img {
          width: 30%;
          margin-top: -6px;
        }
      }

      border: 1px solid #e1e1e1;
      margin: 0.5rem 0;
      padding: 0.5rem 0.5rem;
      border-radius: 5px;
      cursor: pointer;
      font-size: 20px;
    }
  }

</style>
